<template>
  <div class="menuManagement">
    <el-row style="height: 100%">
      <el-col :span="5" style="height: 100%">
        <div class="left">
          <edit-tree
            ref="tree"
            :treeSetting="treeSetting"
            :hideBtn="hideBtn"
            :expandAll="false"
            @handleClickTree="handleClickTree"
          />
        </div>
      </el-col>
      <el-col :span="19" class="list">
        <div class="right">
          <list-table-new v-bind="tableConfig" ref="klTable"></list-table-new>
        </div>
      </el-col>
      <dialogPublic
        :title="title"
        :show.sync="show"
        v-if="show"
        :width="'50%'"
        @doSubmit="doSubmit"
        @doClose="() => (show = false)"
      >
        <fieldset>
          <legend>菜单属性</legend>
          <editForm
            :formConfig="formConfig"
            ref="editForm"
            :formData="editFormData"
          ></editForm>
        </fieldset>
        <div class="paramList" v-show="editFormData.isMenu == 1">
          <editTable
            :tableSetting="tableSettingParam"
            ref="tableParam"
          ></editTable>
        </div>
      </dialogPublic>
    </el-row>
  </div>
</template>

<script>
import {
  menuTreeData,
  queryMenuList,
  addMenu,
  editMenu,
  deleteMenuList,
} from "@/api/systemManagement/authManagement.js";

export default {
  data() {
    return {
      show: false,
      title: "",
      selectNode: {
        id: "",
        name: "",
      },
      treeSetting: {
        btnArr: ["add"],
        title: "",
        data: [],
        defaultProps: {
          children: "children",
          label: "name",
        },
        expandAll: true,
      },
      hideBtn: true,
      tableConfig: {
        showAllSearch: false,
        showIndex: true,
        selectionShow: true,
        showFilterBtn: false,
        showCustomBtn: false,
        //table数据
        searchObj: {
          searchMethod: (params, that) => {
            this.getTableData();
          },
          searchArr: [],
          queryData: {
            page: 1,
            pageSize: 15,
          },
        },
        tableMethods: {
          rowClick: (e) => {},
        },
        actionList: [
          {
            name: "新增",
            icon: "el-icon-plus",
            method: () => {
              this.addMenu();
            },
          },
          {
            name: "删除",
            icon: "el-icon-delete",
            method: (index, row) => {
              this.deleteMenu();
            },
          },
        ],
        //  table表配置参数
        column: [
          {
            label: "菜单名称",
            textAlign: "center",
            prop: "name",
          },
          {
            label: "菜单标识",
            textAlign: "center",
            prop: "code",
          },
          {
            label: "是否开放",
            textAlign: "center",
            prop: "status",
            formatter: (row) => {
              return row.isOpen == 1 ? "是":"否"
            }
          },
          {
            label: "状态",
            textAlign: "center",
            prop: "status",
            formatter: (row) => {
              return row.status == 1 ? "启用":"停用"
            }
          },
          {
            label: "操作",
            textAlign: "center",
            type: "button",
            buttonArr: [
              {
                text: "编辑",
                isShow: () => {
                  return true;
                },
                methods: (row, index) => {
                  this.editMenu(row);
                },
              },
            ],
          },
        ],
        tableData: [],
        showPagination:false,
      },
      formConfig: {
        labelWidth: "100px",
        itemArr: [
          {
            label: "父级菜单",
            prop: "parentName",
            type: "text",
            span: 8,
            required: true,
            disabled: true,
          },
          {
            label: "菜单名称",
            prop: "name",
            type: "text",
            span: 8,
            required: true,
          },
          {
            label: "菜单标识",
            prop: "code",
            type: "text",
            span: 8,
            required: true,
          },
          {
            label: "菜单路径",
            prop: "menuUrl",
            type: "text",
            span: 8,
            required: true,
          },
          {
            label: "是否开放",
            prop: "isOpen",
            type: "radio",
            span: 8,
            required: true,
            radioOption: [
              { label: "是", value: 1 },
              { label: "否", value: 0 },
            ],
          },
          {
            label: "状态",
            prop: "status",
            type: "radio",
            span: 8,
            required: true,
            radioOption: [
              { label: "启用", value: 1 },
              { label: "停用", value: 0 },
            ],
          },
          {
            label: "是否页面",
            prop: "isMenu",
            type: "radio",
            span: 8,
            required: true,
            radioOption: [
              { label: "是", value: 1 },
              { label: "否", value: 0 },
            ],
            methods: (val, formData) => {
              this.editFormData = formData;
              this.tableSettingParam.data.length = 0;
            },
          },
          {
            label: "排序号",
            prop: "sort",
            type: "number",
            span: 8,
            required: true,
          },
        ],
      },
      //弹出框表单数据
      editFormData: {},
      //菜单详情编辑表格
      tableSettingParam: {
        showCheckbox:true,
        showIndex:true,
        btnArr: ["add", "edit", "delete"],
        column: [
          {
            label: "功能名称",
            textAlign: "center",
            prop: "name",
          },
          {
            label: "功能编码",
            textAlign: "center",
            prop: "code",
          },
        ],
        title: "参数列表",
        data: [],
        select: true,
        maxHeight: 200,
      },
    };
  },
  created() {
    this.getTreeData();
    //this.$set(this.tableConfig.tableDataObj, "tableArr", []);
  },
  methods: {
    handleClickTree(node) {
      this.selectNode.id = node.id;
      this.selectNode.name = node.name;
      this.getTableData();
    },
    /**
     * 查询菜单树
     */
    getTreeData() {
      menuTreeData().then(
        (res) => {
          if (res.code == 200 && res.data.length > 0) {
            let menuTree = [
              {
                id: 0,
                name: "全部菜单",
                children: [],
              },
            ];
            menuTree[0].children = res.data;
            //this.defaultExpandKeys.push(zsjOrg[0].id);
            this.treeSetting.data = menuTree;
            if (this.selectNode.id == "") {
              this.selectNode.id = menuTree[0].id;
              this.selectNode.name = menuTree[0].name;
            }
            this.$refs.tree.setCurrentKey(this.selectNode.id);
            this.getTableData();
          }
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
    getTableData() {
      const params = {
        parent: this.selectNode.id,
      };
      queryMenuList(params).then(
        (res) => {
          if (res.code == 200) {
            this.$set(this.tableConfig, "tableData", res.data);
          }
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
    //新建菜单
    addMenu() {
      this.show = true;
      this.title = "新增菜单";
      this.editFormData = {};
      this.editFormData.parentId = this.selectNode.id;
      this.editFormData.parentName = this.selectNode.name;
      this.$set(this.editFormData, "isMenu", 0);
    },
    //编辑菜单
    editMenu(row) {
      this.show = true;
      this.title = "编辑菜单";
      this.editFormData = row;
      this.editFormData.parentName = this.selectNode.name;
      this.tableSettingParam.data = row.menuFuncList;
    },
    deleteMenu() {
      let arr = this.$refs.klTable.getSelectData();
      let ids = [];
      if (arr.length != 0) {
        this.$confirm("确定要删除选中数据吗", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            arr.forEach((item) => {
              ids.push(item.id);
            });
            deleteMenuList({ ids: ids.join() }).then(
              (res) => {
                if (res.code == 200) {
                  this.$message.success(res.description);
                  this.getTreeData();
                }
              },
              (error) => {
                this.$message.error(error);
              }
            );
          })
          .catch((e) => {});
      } else {
        this.$message.warning("请至少勾选一条数据");
      }
    },
    //弹窗确认
    async doSubmit() {
      const params = await this.$refs.editForm.getFormData();
      const tableData = await this.$refs.tableParam.getTableData();
      params.menuFuncList = tableData;
      params.parent = params.parentId;
      if (this.title == "新增菜单") {
        let res = await addMenu(params);
        if (res.code == 200) {
          this.$message.success(res.description);
          this.show = false;
          this.getTreeData();
        } else {
          this.$message.error(res.description);
        }
      } else {
        let res = await editMenu(params);
        if (res.code == 200) {
          this.$message.success(res.description);
          this.show = false;
          this.getTreeData();
        } else {
          this.$message.error(res.description);
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.menuManagement {
  width: 100%;
  height: 100%;
  .el-form-item {
    width: auto !important;
    margin: 0 !important;
  }
  .left {
    height: 100%;
    overflow: auto;
  }
  .list {
    height: 100%;
    padding: 20px;
    border-left: 10px #f2f3f8 solid;
  }
  .right {
    height: 100%;
  }
  fieldset {
    width: calc(100% - 62px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    border-radius: 4px;
    border: 1px #d7dae2 solid;
    padding: 0 30px 0 30px;
    margin-top: 10px;
  }
  legend {
    margin-left: 30px;
    text-align: left;
  }
  .paramList {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    border-radius: 4px;
    border: 1px #d7dae2 solid;
    padding: 0 30px 0 30px;
    margin-top: 10px;
  }
}
</style>